import React, { memo, useState } from 'react';
import { FilterWrapper } from '@/views/entire/c-cpns/entire-filter/style'

import filterData from '@/assets/data/filter_data.json'
import classNames from 'classnames'
const EntireFilter = memo(() => {

  const [activeName, setActiveName] = useState([])


  const itemClickHandle = (name) => {
    let temp = [...activeName]
    if ( temp.indexOf(name) !== -1 ) {
      temp.splice(temp.indexOf(name), 1);
    } else {
      temp.push(name);
    }
    setActiveName(temp);
  }
  return (<FilterWrapper >
    <div className="filter">
      { filterData.map(item => {
        return <div className={ classNames('item', {active: activeName.includes(item)}) } key={ item }
                    onClick={ () => itemClickHandle(item) }>{ item }</div>
      }) }
    </div>
  </FilterWrapper>);
});

export default EntireFilter;
